<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <button type="submit" @click="getOrder">下单</button>
    <p>{{port}}</p>
    <iframe frameborder="yes" border="10px" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=178841&auto=1&height=66"></iframe>

    <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=298 height=52 src="//music.163.com/outchain/player?type=2&id=109530&auto=1&height=32"></iframe>
</div>

<script src="../js/vue.min.js"></script>
<script src="../js/axios.min.js"></script>
<script>

   var vue=new Vue({
       el:'#app',
       data:{
        port:""
       },
       mounted(){
           this.getOrdes();
   //        this.getOrder();
       },
       methods:{
           // getOrder(){
           //     axios.get("localhost:8080/saveorder", {
           //         params: {
           //             userId:1,
           //             productId:2
           //         }
           //     }).then(res=>{
           //       console.log(res);
           //     })
           // }
           getOrder(){
               axios.get("http://localhost/saveorder",{params:{userId:1,productId:2}}).then(function(res){
                   console.log(res);
               })
           },
           getOrdes(){
               var that=this;
               axios.get("http://localhost/getPorts").then(function(res){
                   console.log(res.data.data);
                   that.port=res.data.data;
               })
           }
       },

   })
</script>
</body>
</html>